<template>
  <div :class="$style.wrap">
    <template v-if="careMode.includes('1')">
      <Title title="短信关怀" :title-class="$style.title" style="padding-top:0px"></Title>
      <SMS :info="info"></SMS>
    </template>
    <template v-if="careMode.includes('2')">
      <Title title="邮件关怀" :title-class="$style.title" style="padding-top:0px"></Title>
      <Email :info="info"></Email>
    </template>
    <template v-if="careMode.includes('3')">
      <Title title="电话关怀" :title-class="$style.title" style="padding-top:0px"></Title>
      <CallCare :info="info"></CallCare>
    </template>
    <template v-if="careMode.includes('4')">
      <Title title="贺卡礼物关怀" :title-class="$style.title" style="padding-top:0px"></Title>
      <GiftCare :info="info" :care-info="careInfo" @on-success="$emit('on-success')"></GiftCare>
    </template>
  </div>
</template>
<script>
import Title from '@/components/Title'
import SMS from './sms'
import Email from './email'
import CallCare from './callCare'
import GiftCare from './giftCare'
export default {
  name: 'Care',
  components: {
    Title,
    SMS,
    Email,
    CallCare,
    GiftCare
  },
  props: {
    careMode: {
      type: Array,
      default: () => []
    },
    careInfo: {
      type: Object,
      default: () => ({})
    },
    info: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
